﻿<template>
  <el-dropdown trigger="click">
    <el-badge v-if="notificationList.length > 0" is-dot>
      <div class="i-svg:bell" />
    </el-badge>

    <div v-else class="i-svg:bell" />
    <template #dropdown>
      <el-empty
        v-if="notificationList.length <= 0"
        description="暂无消息"
        style="width: 25vw; justify-items: center"
      />
      <el-scrollbar
        v-else
        style="height: 80vh; width: 25vw; justify-items: center"
        @contextmenu.prevent="onContextmenu($event)"
      >
        <message-div
          v-for="(item, index) of notificationList"
          :key="index"
          :msg="item.message"
          :title="item.time"
          :type="item.type"
          style="margin: 8px 0; width: calc(25vw - 20px)"
        ></message-div>

        <AgelContextMenu
          v-model="contextMenu.show"
          :x="contextMenu.x"
          :y="contextMenu.y"
          :menus="contextMenu.data"
          @select="contextMenu.onSelect"
        />
      </el-scrollbar>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useDetectStore } from "@/store/business/detect.store";

const detectStore = useDetectStore();
const notificationList = detectStore.detectMessages;

// region 右键菜单

const MENU_NAME = {
  ClearAll: "清空消息",
};

const contextMenu = reactive({
  device: {},
  show: false,
  x: 0,
  y: 0,
  data: [],
  onSelect: (item: any) => {
    console.log(item);
    if (item.title === MENU_NAME.ClearAll) {
      detectStore.clearDetectMessages();
      closeContextMenu();
    }
  },
});

function onContextmenu(e: MouseEvent) {
  // 根据设备连接状态动态生成菜单项
  contextMenu.data = [{ title: MENU_NAME.ClearAll, icon: "Delete" }];

  contextMenu.show = true;
  contextMenu.x = e.clientX;
  contextMenu.y = e.clientY;
  e.preventDefault();
}
const closeContextMenu = () => {
  contextMenu.show = false;
};

// endregion
</script>

<style scoped lang="scss">
:deep(.el-scrollbar__view) {
  justify-items: center;
}
</style>
